<!-- 经济运行数据 -->
<template>
    <div class="economics">
        <CommonTitleComponent text="经济运行数据"></CommonTitleComponent>
        <ul>
            <li v-for="(item, index) in economicsState" :key="index">
                <div>
                    <div v-for="(r, idx) in item" :key="idx">
                        <h3>
                            {{ r.num }}
                            <span>亿元</span>
                        </h3>
                        <p>{{ r.label }}</p>
                    </div>
                </div>
                <img src="@img/dizui.png" alt="" />
            </li>
        </ul>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import type { Ref } from 'vue';

interface State {
    label: string;
    num: number;
}

const economicsState: Ref<Array<Array<State>>> = ref([
    [
        {
            label: '总产值',
            num: 5.28
        },
        {
            label: '总投资',
            num: 5.28
        },
        {
            label: '总税收',
            num: 5.28
        }
    ],
    [
        {
            label: '亩产产值',
            num: 1.28
        },
        {
            label: '亩产投资',
            num: 1.28
        },
        {
            label: '亩产收入',
            num: 1.28
        }
    ],
    [
        {
            label: '主营业务收入',
            num: 2.28
        },
        {
            label: '利润总额',
            num: 2.28
        },
        {
            label: '亩产收入',
            num: 2.28
        }
    ]
]);
</script>
<style lang="scss" scoped>
.economics {
    ul {
        margin-top: 20px;
    }
    li {
        margin-bottom: 25px;
        position: relative;
        height: 32px;
        > img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 32px;
        }
        > div {
            position: absolute;
            width: 100%;
            top: -17px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            text-align: center;
            z-index: 1;
            // > div {
            //     transform: translateY(-20px);
            //     position: relative;
            //     z-index: 1;
            // }
        }
        &:last-of-type {
            margin-bottom: 0;
        }
        h3 {
            @include fontCustomStyle(#23fffc, 22px);
            span {
                font-size: 12px;
                margin-left: -2px;
                font-weight: normal;
            }
        }
        p {
            @include fontCustomStyle(#ccd6d6, 12px);
        }
    }
}
</style>
